<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号">
                        <el-input v-model="condition['search_LIKE_containerId']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型">
                        <auto-search-entrust v-model="condition['search_LIKE_containerType']"
                                             :name="condition['search_LIKE_containerType']"></auto-search-entrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸">
                        <auto-search-size v-model="condition['search_EQ_containerSize']"
                                          :name="condition['search_EQ_containerSize']"></auto-search-size>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="内外贸">
                        <el-select v-model="condition['search_EQ_tradeType']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="空重">
                        <el-select v-model="condition['search_EQ_ef']" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船代">
                        <auto-search-custom @selectName="v=>condition['search_LIKE_shipAgentName']=v"
                                            :name="condition['search_LIKE_shipAgentName']"
                                            :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="装货港：" prop="loadPort">
                        <auto-search-port-station 
                            @selectCode="v=>condition['search_EQ_loadPort']=v"
                            v-model="condition['search_EQ_loadPort']">
                            </auto-search-port-station>
                    </el-form-item>
                </el-col>
                <!--<el-col :span="8">-->
                    <!--<el-form-item label="中转">-->
                        <!--<el-select v-model="condition['search_EQ_change']" placeholder="请选择" clearable>-->
                            <!--<el-option v-for="[key, val] in _dictTrueOrFalse" :key="key" :label="val" :value="key">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
                <el-col :span="16">
                    <el-button type="primary" class="ml-80" @click="loadData">查询</el-button>
                    <el-button @click="handleExport">导出Excel</el-button>
                    <el-button @click="handlePrint">打印</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="table" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" fixed="left" label="序号" width="55"></el-table-column>
            <!--<el-table-column prop="containerId" label="箱号"  min-width="120"></el-table-column>-->
            <el-table-column prop="containerId" label="箱号"  min-width="120">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="handleDetail(scope.row)">
                        {{ scope.row.containerId }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="120"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.ef | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="sealNo" label="铅封号"  min-width="100"></el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="80"></el-table-column>
            <el-table-column prop="cargoCount" label="件数"  min-width="80"></el-table-column>
            <el-table-column prop="loadPort" label="装货港"  min-width="100"></el-table-column>
            <el-table-column prop="containerWeight" label="箱货重"  min-width="100"></el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="140"></el-table-column>
            <el-table-column prop="tallyClerk" label="完成人"  min-width="140"></el-table-column>
            <el-table-column prop="tallyTime" label="完成时间"  min-width="160"></el-table-column>
        </el-table>
        <load-detail-form v-if="dialogForm" ref="loadDetailForm" @load="loadData"></load-detail-form>
    </div>
</template>

<script>
    import { shipPlanPort } from "@/api/shipPlan/shipPlan";
    import autoSearchEntrust from '@/components/autocomplete/autoSearchEntrust'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import autoSearchPortStation from '@/components/autocomplete/autoSearchPortStation'
    import { newExportExcel } from "@/utils/newExport";
    import {ifHeavyType,tradeType} from "../../../../assets/dict";
    import {getPlanId } from '@/api/planList/planList.js'
    import loadDetailForm from '@/views/business/shipPlan/loadDetailForm'
    import { preview } from "@/api/attachment/attachment";
    export default {
        name: "damaged",
        components: {
            autoSearchEntrust, autoSearchSize, autoSearchCustom, loadDetailForm,autoSearchPortStation
        },
        data() {
            return {
                table: [],
                condition: {},
                dialogForm: false,
                id:''
            }
        },
        mounted() {
            // this.loadData()
        },
        activated() {
            // this.loadData()
        },
        methods: {
            loadData() {
                let params = this.$assist.copySearchConditions(this.condition)
                shipPlanPort(this.id, params).then(res => {
                    this.table = res.data.aaData
                })
            },
            handlePrint(){
                const origin = window.location.origin + window.location.pathname
                const route = "#/OnPortPrint/"
                window.open(`${origin}${route}${this.id}`);
            },
            // 查看详情
            handleDetail(item) {
                if (item.planId == null){
                    this.$message({
                        message: '该箱没有计划',
                        type: 'warning'
                    })
                    return
                }
                getPlanId(item.planId).then(res => {
                    this.dialogForm = true
                    this.$nextTick(() => {
                        this.$refs.loadDetailForm.dialogForm = true
                        let form = JSON.parse(JSON.stringify(res.data))
                        delete form.records
                        if (form.attachments != null && form.attachments.length > 0){
                            form.attachments.forEach(item => {
                                preview(item.id).then(res => {
                                    let url = res.data
                                    let strUrl = res.data.substr(0, url.length - 2)
                                    item.viewPath = strUrl.substr(url.indexOf('=') + 1, strUrl.length)
                                }).catch(err =>{
                                    item.viewPath = 'http://img10.360buyimg.com/n1/jfs/t17479/331/463860348/54829/98c31e6d/5a7bb620N7ca92f1c.jpg'
                                })
                            })
                        }
                        this.$refs.loadDetailForm.form = form
                        this.$refs.loadDetailForm.table = res.data.records
                        this.$refs.loadDetailForm.isShowByLoad = false
                        this.$refs.loadDetailForm.isShowByHistory = false
                    })
                })
            },
            handleExport(){
                let map = new Map();
                map.set("containerId","箱号")
                map.set("containerType","箱型")
                map.set("containerSize","尺寸")
                map.set("tradeType","内外贸")
                map.set("ef","空重")
                map.set("sealNo","铅封号")
                map.set("cargoName","货名")
                map.set("cargoCount","件数")
                map.set("containerWeight","箱货重")
                map.set("shipAgentName","船代")
                map.set("finishUser","完成人")
                map.set("finishTime","完成时间")
                let exportRecords = [];
                let exportArr = JSON.parse(JSON.stringify(this.table));
                exportArr.forEach(record => {
                    let exportRecord = {};
                    for (let [key, value] of map.entries()) {
                        if (key === "ef") {
                            record[key] = ifHeavyType.get(record[key]);
                        }
                        if (key === "tradeType") {
                            record[key] = tradeType.get(record[key]);
                        }
                        exportRecord[value] = record[key];
                    }
                    exportRecords.push(exportRecord);
                });
                newExportExcel("港装箱报告", exportRecords);
            }
        },
    }
</script>

<style scoped>

</style>
